<template>
<div class="vote">
    <el-radio-group v-model="vote" size="big">
      <!-- 进度条们 -->
      <div v-for="item in votes" :key="item.id" style="margin-top: -10px;">
        <el-radio :label="item.id" border id="radio">
          {{item.name}}
            <el-progress class="progress"
            style="margin-top:5px;" :text-inside="true" :stroke-width="20" :percentage="item.percentage" :color="item.color"></el-progress>
        </el-radio>
      </div>
      <button-component></button-component>
    </el-radio-group>
</div>
</template>

<script>
import buttonComponent from './buttonComponent.vue'
export default {
  data () {
    return {
      vote: '0',
      votes: [
        {
          id: 1,
          name: '回答靠谱！',
          percentage: 78,
          color: 'SlateBlue'
        },
        {
          id: 2,
          name: '回答不错',
          percentage: 20,
          color: 'Khaia'
        },
        {
          id: 3,
          name: '答非所问',
          percentage: 2,
          color: 'Salmon'
        }
      ]
    }
  },
  components: {
    buttonComponent
  }
}
</script>

<style lang='scss'>
.vote {
    width: 100%;
    font-family: 微软雅黑;
    div {
        width: 100%;
        text-align: center;
        // margin-top: 5px;
        div {
            width: 100%;
            text-align: center;
            // height: none;
            // progress组件开始处
            label {
              text-align: left;
              width: 100%;
              margin: 10px 0px;
              span {
                div {
                  text-align: right;
                  padding-right: 20px;
                }
              }
            }
            button {
              text-align: center;
            }
        }
    }
}
#radio {
  height: 50px;
  border: none;
  font-size: 10px;
  font-weight: bold;
  color: gray;
  letter-spacing: 1px;
}

</style>
